<template>
  <div class="search-wrapper">
    <div class="search-head">
      <van-icon
        name="arrow-left"
        class="arr-left"
        @click="$router.goBack()"
      ></van-icon>
      <van-search
        class="search-content"
        v-model="value"
        show-action
        :placeholder="place"
        @search="onSearch"
        @input="input"
        @focus="focus"
        autofocus
      />
    </div>
    <div class="like-search" v-if="likeList.length && showList">
      <van-list>
        <van-cell
          v-for="item in likeList"
          :key="item"
          :title="item"
          @click="onSearch(item)"
        >
          <template #title>
            <span class="custom-title" v-html="formatHTML(item)"></span>
          </template>
        </van-cell>
      </van-list>
    </div>
    <div class="song-card" v-if="!showList">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, i) in list"
          :key="i"
          :title="item.name"
          :value="(item.transNames && item.transNames.join()) || ''"
          :label="item.artists[0].name"
          @click="clickHandler(item)"
        />
        <!-- :value="item.transNames.join()" -->
      </van-list>
    </div>
    <div v-else class="history">
      <History :searchList="searchList" @search="onSearch"></History>
    </div>
    <van-popup
      v-model="showMusicPlay"
      closeable
      close-icon="arrow-down"
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <music-play v-if="showMusicPlay" />
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import History from "../components/history.vue";
import MusicPlay from "../components/musicPlay.vue";

export default {
  components: {
    History,
    MusicPlay,
  },
  created() {
    this.searchList = JSON.parse(localStorage.getItem("searchList")) || [];
  },
  data() {
    return {
      timer: null,
      searchList: [],
      loading: false,
      finished: false,
      value: "", // 搜索框中的值
      length: 0,
      place: "海阔天空",
      likeList: [],
      showList: true,
      list: [],
      page: 1,
      size: 30,
    };
  },
  computed: {
    ...mapState({
      showPlayMusic: (state) => state.showPlayMusic,
    }),
    showMusicPlay: {
      get() {
        return this.showPlayMusic;
      },
      set(val) {
        this.showSongPlay(val);
      },
    },
  },
  methods: {
    ...mapMutations(["storageSongId", "showSongPlay"]),
    onSearch(val) {
      if (val) {
        this.value = val;
      }
      // searchKeywords
      this.finished = false;
      this.likeList = [];
      if (this.value === "") {
        this.value = this.place;
      }
      const result = this.searchList.find((item) => item.value === this.value);
      if (result) {
        result.time = new Date().getTime();
        this.searchList.sort((a, b) => b.time - a.time);
      } else {
        this.searchList.unshift({
          value: this.value,
          time: new Date().getTime(),
        });
        if (this.searchList.length >= 11) {
          this.searchList.pop();
        }
      }
      localStorage.setItem("searchList", JSON.stringify(this.searchList));
      this.list = [];
      this.page = 1;
      this.$api.Search(this.value, this.page, this.size).then((res) => {
        this.length = res.data.result.songCount;
        this.list = [...this.list, ...res.data.result.songs];
        this.showList = false;
      });
    },
    onLoad() {
      this.page += 1;
      this.$api.Search(this.value, this.page, this.size).then((res) => {
        this.list = [...this.list, ...res.data.result.songs];
        this.loading = false;
        this.length = res.data.result.songCount;
        // 数据全部加载完成
        if (this.list.length >= this.length) {
          this.finished = true;
        }
      });
    },
    input() {
      if (this.value === "") {
        this.likeList = [];
        return;
      }
      // 动态
      // if (this.timer) {
      //   clearInterval(this.timer);
      //   this.timer = null;
      // } else {
      //   this.timer = setTimeout(() => {
      //     this.$api.likeSearch(this.value).then((data) => {
      //       this.likeList = data.data.result;
      //       clearInterval(this.timer);
      //       this.timer = null;
      //     });
      //   }, 300);
      // }
    },
    formatHTML(value) {
      const reg = new RegExp(this.value, "g");
      return value.replace(reg, this.value.fontcolor("red"));
    },
    focus() {
      this.showList = true;
    },
    clickHandler(item) {
      let songs = [];
      this.$api.getSongInfo(item.id).then((res) => {
        songs = res.data.songs;
        this.storageSongId({ id: item.id, ids: [item.id], musicArr: songs });
        this.showSongPlay(true);
      });
    },
  },
};
</script>

<style lang="less">
.search-wrapper {
  width: 100%;
  height: 100vh;
  z-index: 10;
  background: #fff;
  .search-head {
    width: 345px;
    background: #fff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: fixed;
    left: 15px;
    top: 0;
    z-index: 100;
    .arr-left {
      font-size: 22px;
    }
    .search-content {
      flex: 1;
      .shop-car {
        font-size: 25px;
      }
    }
  }
  .like-search {
    top: 50px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-left: 30px;
    background: #fff;
    z-index: 10;
  }
  .goods-card {
    position: relative;
    width: 345px;
    margin: 48px auto 0;
    z-index: 10;
    background: #fff;
  }
  .history {
    width: 350px;
    position: absolute;
    top: 35px;
    left: 10px;
    z-index: 1;
  }
}
</style>
